<script setup>
import SubjectCard from '/src/components/SubjectCard.vue';
import SearchBar from '/src/components/SearchBar.vue'
import Pagination from '/src/components/Pagination_lxw.vue';
import { useRouter } from 'vue-router';
import { ref, watchEffect } from 'vue'
import getRequest from '../../utils/lxw_request';


const router = useRouter()


// SubjectCard's function
// button's text 是 i18n里的内容
const buttons = [
    {
        text: 'hall.subjectCard.operation.apply',
        func: function applyToJoin({course_id}) {
            getRequest(`/stu/course/${course_id}`, "POST", new Headers({ 'Content-Type': 'application/json' }))
                .then((response) => response.json())
                .then((json) => {
                    if (json.code === 200) {
                        alert("加入课程成功");
                    } else {
                        alert(json.msg);
                    }
                })
                .catch((err) => {
                    console.error(err);
                })
        }
    },
    {
        text: 'hall.subjectCard.operation.detail',
        func: getSubjectDetail
    }
]

function getSubjectDetail({ subject_id }) {
    router.push({ name: 'subject_detail', params: { subject_id } })

}

// API

// 获取课程大厅
let courses = ref([]);
const current = ref(1)
const pageSize = ref(10)
const query = ref('')
function changeCurrentPage(cur) {
    current.value = cur;
}

function changePageSize(size) {
    pageSize.value = size;
}

function getCourse() {
    
    const searchParams = new URLSearchParams();
    searchParams.set("current", current.value);
    searchParams.set("pageSize", pageSize.value);
    if(query.value !== '') {
        searchParams.set("name", query.value);
    }
    getRequest(`/stu/course?${searchParams.toString()}`, "GET", new Headers({ 'Content-Type': 'application/json' }))
        .then((response) => response.json())
        .then((json) => {
            if (json.code === 200) {
                courses.value = json.data.records;
            } else {
                alert(json.msg);
            }
        })
        .catch((err) => {
            console.error(err);
        })
}

watchEffect(() => {
    getCourse()
})





</script>
<template>
    <div class="subject-hall-home">
        <div class="hall-home-header">
            <div class="title">
                <h1>课题列表</h1>
                <p style="font-size: 16px;">在这里 你可以看到可选择的课题信息</p>
            </div>
            <SearchBar placeholder="搜索课程名称" style="width: 607px;" v-model:query="query" />
        </div>
        <div class="hall-home-main">
            <SubjectCard v-for="(item, index) in courses" :key="index" style="margin: 14px 14px;"
                :itemName="item['courseName']" :itemIntroduction="item['courseIntroduction']" :itemId="item['courseId']"
                :buttons="buttons" :params="[{course_id: item['courseId']}, { subject_id: item['courseId'] }]" />

        </div>
        <div class="hall-home-pagination">
            <Pagination :total="courses.length" @change-current-page="changeCurrentPage" @change-per-page-size="changePageSize" />
        </div>

    </div>
</template>
<style scoped>
.subject-hall-home {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 0px 89px;

}

.hall-home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 20px 14px;
    flex-wrap: wrap;

}

.hall-home-header h1,
p {
    font-family: Source Han Sans CN;
    font-size: 30px;
    color: #707070;
    margin: 10px 0px;
}

.hall-home-main {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    width: 100%;
    height: 615px;
    overflow-y: auto;
    
}

.hall-home-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 20px 0px;
}
</style>